/* ******************  body  *************** */
* {
    margin:0;
    padding:0;
    border:0;
}
body {
    margin:30px 0px 0px 0px;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#306e9a;
    background:url(../images/bg.jpg) repeat-x #d3e4f2;
}
a {
    color:#5199c5;
    text-decoration:none;
}
a:hover {
    color:#5199c5;
    text-decoration:none;
}
img {
    border:none;
}
.clear {
    clear:both;
}
h1 {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin: 3px 0px 10px 0px;
    color:#e31b24;
}
h2 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; margin: 7px 0px 10px 14px; color:#267fb4; font-style: italic;}
p {line-height: 18px; margin:0px 0px 10px 0px; text-align: justify;}

/* ******************  navigation  *************** */
ul#nav {
    width:167px;
    margin:0px 0px 40px 0px;
    height:257px;
    float: left;
}
ul#nav li {list-style-type: none; margin:0;}
#nav li, #nav a {padding:0px;  float:left;}
#nav li a {outline: 0; text-indent: -4000px; background: url(../images/navigation.jpg) no-repeat; margin:0px 0px 1px 0px; height: 42px; line-height: 42px;}

/* BUTTONS */
#nav #welkom a {width:167px; background-position:0 0;}
#nav #overons a {width:167px; background-position:0 -43px;;}
#nav #portfolio a {width:167px; background-position:0 -86px;}
#nav #klanten a {width:167px; background-position:0 -129px;}
#nav #support a {width:167px; background-position:0 -172px;}
#nav #contact a {width:167px; background-position:0 -215px;}

/* BUTTONS HOVER/ACTIVE */
#nav #welkom a:hover, #nav #welkom .active {background-position:-167px 0px;}
#nav #overons a:hover, #nav #overons .active {background-position:-167px -43px;}
#nav #portfolio a:hover, #nav #portfolio .active {background-position:-167px -86px;}
#nav #klanten a:hover, #nav #klanten .active {background-position:-167px -129px;}
#nav #support a:hover, #nav #support .active {background-position:-167px -172px;}
#nav #contact a:hover, #nav #contact .active {background-position:-167px -215px;}

/* ******************  containers  *************** */
div#headcontainer {width:890px; min-height:800px; margin:0 auto; padding: 5px 5px 0px 5px; background:url(../images/bg_top.gif) top left no-repeat #fff;}
div#headcontainer div#sidebar {width:184px; padding: 0px 0px 20px 0px; margin: 0px 10px 0px 0px; float:left; color:#5199c5; background:url(../images/sidebar_bg.gif) top right no-repeat;}
div#headcontainer div#sidebar p {margin:0px 0px 10px 16px;}
div#headcontainer div#sidebar strong {color:#0069aa; padding-right: 5px;}
div#headcontainer div#sidebar a:hover {text-decoration: underline;}

div#headcontainer div#content {width:500px; float:left; padding: 0px 10px 0px 0px;}

div#headcontainer div#sidebarright {width:150px; float:left; background:url(../images/sidebar_right.gif) top left no-repeat; height: 400px; padding: 0px 0px 50px 17px;}
div#headcontainer div#sidebarright .item p {margin: 0;}
div#headcontainer div#sidebarright .item {width:159px; background-color:#e6f2fc; padding: 5px 0px 5px 14px; margin: 0px 0px 1px 0px;}

div#footer {position: fixed; bottom: 0; left: 0; width: 100%; height: 70px; background:url(../images/footer_bg.gif) repeat-x; color:#e31b23;}
div#footer p {padding:40px 0; width:430px; margin:0 auto; font-weight: bold;}

/*Portfolio*/

#foliocontentnegative {
    margin-right: -15px;
}

.portfolioshadow {
    background: url(../images/foilo-shadow.png) no-repeat bottom;
    padding-bottom: 12px;
    width: 200px;
    float: left;
    margin-right: 21px;
    margin-bottom: 30px;
}
.portfolioitem {
    border: 1px solid #C9C7C9;
    padding: 10px;
}
.portfolioitem:hover {
    border: 1px solid #A5A2A4;
}
.portfolioshadow .portfolioitem p {
    padding-bottom: 0px;
}
.portfolioitem a {
    display: block;
    position: relative;
}
img.portfolioimage {
    border: 1px solid #DBDADB;
    line-height: 1em;
    padding: 0px;
    margin: 0px;
    width: 174px;
    height: 164px;
}
.portfoliohover {
    display: none;
}
a.portfoliolink:hover .portfoliohover {
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    width: 174px;
    height: 164px;
}
.portfoliohovertext {
    position: absolute;
    top: 70px;
    left: 15px;
    width: 122px;
    height: 24px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: #FFFFFF;
    background: #306e9a;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
}
a .potfoliotitle,
a:visited .potfoliotitle {
    font-size: 1.1em;
    padding-top: 5px;
    display: block;
    color: #4B454A;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: -1px;
    padding-left: 10px;
}
a:hover .potfoliotitle {
    color: #306e9a;
    text-decoration: none;
}

/*Contact page*/

h2.contactCall {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    margin: 7px 0px 10px 0px;
    color:#267fb4;
    font-style: normal;
}

h2.contactMessage {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: normal;
    margin: 7px 0px 10px 0px;
    color:#267fb4;
    font-style: normal;
}

.required:before
{
    content: "* ";
    font-size: 150%;
    color: #e31b24;
}

label {
    float: left;
    width: 150px;
    text-align: right;
    padding-right: 10px;
    padding-top: 3px;
}

input,
textarea {
    width: 200px;
    padding: 4px;
    border: 1px solid #CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #333333;
    font-size: 14px;
}

input.error,
textarea.error {
    width: 200px;
    padding: 4px;
    border: 2px solid #e31b24;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #333333;
    font-size: 14px;
}

input.reset,
textarea.reset {
    width: 200px;
    padding: 4px;
    border: 1px solid #CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #333333;
    font-size: 14px;
}

input:focus,
textarea:focus {
    border: 1px solid #267fb4;
}

dl {
    padding: 0.5em;
}
dt {
    float: left;
    clear: left;
    width: 175px;
    text-align: left;
    font-weight: bold;
}

dd {
    margin: 0 0 0 110px;
    padding: 0 0 0.5em 0;
}

.send {
    background-color: #ffffff;
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

.errors {
    font-size: 95%;
    color: #e31b24;
}

ul.errors li {
    list-style-type: none;
}
